import React from 'react';
import TweenOne from 'rc-tween-one';
import { Row, Col } from 'antd';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

class Content7 extends React.Component {
  render() {
    const { ...props } = this.props;
    const queue = 'left';
    const imgAnim = {
      x: 30,
      opacity: 0,
      type: 'from',
      ease: 'easeOutQuad',
    };

    return (
      <div {...props} className="home-page-wrapper content6-wrapper">
        <OverPack className="home-page content6" component={Row}>
          <QueueAnim
            key="text"
            type={queue}
            leaveReverse
            ease={['easeOutQuad', 'easeInQuad']}
            className="content6-text"
            component={Col}
            componentProps={{ xs: 24, md: 10 }}
          >
            <div key="title" className="title-wrapper">
              <h1 className="title-h1">蚂蚁金融云提供专业的服务</h1>
              <div className="title-content">基于阿里云计算强大的基础资源</div>
            </div>
            <QueueAnim
              component="ul"
              key="ul"
              type={queue}
              ease="easeOutQuad"
              className="content6-block"
            >
              <li key="block0" className="content6-item">
                <span className="content6-icon">
                  <img src="/images/NKBELAOuuKbofDD.png" width="100%" alt="img" />
                </span>
                <h2 className="content6-title">技术</h2>
                <div className="content6-content">丰富的技术组件，简单组装即可快速搭建金融级应用，丰富的技术组件，简单组装即可快速搭建金融级应用。</div>
              </li>
              <li key="block1" className="content6-item">
                <span className="content6-icon">
                  <img src="/images/xMSBjgxBhKfyMWX.png" width="100%" alt="img" />
                </span>
                <h2 className="content6-title">融合</h2>
                <div className="content6-content">解放业务及技术生产力，推动金融服务底层创新，推动金融服务底层创新。解放业务及技术生产力，推动金融服务底层创新。</div>
              </li>
              <li key="block2" className="content6-item">
                <span className="content6-icon">
                  <img src="/images/MNdlBNhmDBLuzqp.png" width="100%" alt="img" />
                </span>
                <h2 className="content6-title">开发</h2>
                <div className="content6-content">符合金融及要求的安全可靠、高可用、高性能的服务能力，符合金融及要求的安全可靠、高可用、高性能的服务能力。</div>
              </li>
            </QueueAnim>
          </QueueAnim>
          <TweenOne
            key="img"
            animation={imgAnim}
            resetStyle
            className="content6-img"
            component={Col}
            componentProps={{ xs: 24, md: 14 }}
          >
            <img src="/images/VHGOVdYyBwuyqCx.png" width="100%" alt="img" />
          </TweenOne>
        </OverPack>
      </div>
    );
  }
}

export default Content7;
